<template>
    <div>
        <!-- 查询 -->
        <div>
            <el-form :inline="true" :v-model="unit" class="demo-form-inline">
                <el-form-item label="计量单位:">
                    <el-input v-model="unit.FUnitName" placeholder="计量单位" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="queryUnitList" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 按钮 -->
        <div>
            <el-button type="primary" icon="el-icon-plus" @click="showEditDialog" size="small">添加</el-button>
            <!-- <el-button type="primary" icon="el-icon-bottom" size="small">导入</el-button>
            <el-button type="primary" icon="el-icon-top" size="small">导出</el-button> -->
            <el-button type="primary" v-show="deleteMore" icon="el-icon-delete-solid" @click="deleteMoreBotton" size="small">批量删除</el-button>
        </div>
        <!-- 表格 -->
        <div>
            <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="id" label="#"/>
                <el-table-column prop="unitOfMeasurement" label="计量单位"/>
                <el-table-column prop="basicUnit" label="基本单位"/>
                <el-table-column prop="deputyUnit" label="副单位"/>
                <el-table-column prop="proportion" label="比例"/>
                <el-table-column
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <!-- 修改 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
                        <!-- 删除 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page
            @on-change="queryUnitList"
            :total="total"
            show-total
            :page-size="pageSize"
            style="float:right"/>
            <!-- 修改、添加 -->
            <div style="width: 100%">
                <el-dialog :title="uORiText" width="80%" :visible.sync="updateFormVisible" :before-close="handleClose">
                    <el-form :v-model="updateform" :inline="true" >
                        <el-form-item label="单位名称" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.unitOfMeasurement" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="基本单位" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.basicUnit" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="副单位" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.deputyUnit" autocomplete="off" size="medium"/>
                        </el-form-item>
                        <el-form-item label="比例" style="margin: 0 0 30px 30px;">
                            <el-input v-model="updateform.proportion" autocomplete="off" size="medium"/>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertUpdateForm">确 定</el-button>
                </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios"
export default {
    data() {
        return {
            unit:{
                FUnitName: '',
            },
            deleteMore: false,
            loading: false,
            tableData: [],
            currentPage: 1,
            pageSize: 6,
            total: 0,
            updateform: {
                id:'',
                unitOfMeasurement: '',
                basicUnit: '',
                deputyUnit: '',
                proportion: ''
            },
            updateFormVisible: false,
            updateORinsert: '',
            uORiText:'',
            multipleSelection: {
                id:'',
                unitOfMeasurement:'',
                basicUnit:'',
                deputyUnit: '',
                proportion:'',
            },
            multipleSelection1: {
                id:'',
                unitOfMeasurement:'',
                basicUnit:'',
                deputyUnit: '',
                proportion:'',
            },
            

        }
    },
    created(){
        this.queryUnitList();
    },
    methods:{
        // 查询
        queryUnitList(currentPage){
            this.loading=true;
            if(currentPage!=null){
                if(isNaN(currentPage)){
                    this.currentPage = 1;
                }else{
                    this.currentPage = parseInt(currentPage);
                }
            }else{
                this.currentPage = 1;
            }
            axios.get("http://localhost:8082/commodity/getUnitPage?name="+this.unit.FUnitName+"&index="+this.currentPage+"&pageSize="+this.pageSize).then(res=>{
                this.total = res.data.total
                this.tableData = res.data.unit
                this.loading=false;
                console.log(this.tableData)
            })
        },
        // 修改添加框 -- 关闭按钮
        handleClose(){
            this.updateFormVisible = false
        },
        // 添加修改框 -- 确定按钮
        insertUpdateForm(){
            if(this.updateORinsert=='0'){
                axios.post("http://localhost:8082/commodity/updateUnit",this.updateform).then(res=>{
                    if(res!='ok'){
                      this.queryUnitList();
                      this.updateFormVisible = false;
                      this.$message.success("修改成功");
                  }else{
                      this.updateFormVisible = false;
                      this.$message.error("修改失败");
                  }
                })
            }else if(this.updateORinsert = '1'){
                axios.post("http://localhost:8082/commodity/insertUnit",this.updateform).then(res=>{
                    if(res!='ok'){
                      this.queryUnitList();
                      this.updateFormVisible = false;
                      this.$message.success("添加成功");
                  }else{
                      this.updateFormVisible = false;
                      this.$message.error("添加失败");
                  }
                })
            }

        },
        // 勾选内容获取
        handleSelectionChange(rows){
            this.deleteMore=true;
            this.multipleSelection1 = rows;
            this.multipleSelection = [];
            this.multipleSelection1.forEach(e=>{
                this.multipleSelection.push(e.id);
            })
            console.log(this.multipleSelection)
        },
        // 批量删除
        deleteMoreBotton(){
            axios.post("http://localhost:8082/commodity/deleteMoreUnit",this.multipleSelection).then(res=>{
              console.log("批量删除"+res)
                if(res!='ok'){
                    this.queryUnitList();
                    this.$message.success("删除成功");
                }else{
                    this.$message.error("删除失败");
                }
            })
        },
        // 修改增加
        showEditDialog(row){
            this.updateFormVisible=true;
            if(row.id!=null){
                this.updateORinsert = '0';
                this.uORiText = '修改';
                this.updateform.id = row.id;
                this.updateform.unitOfMeasurement = row.unitOfMeasurement;
                this.updateform.basicUnit = row.basicUnit;
                this.updateform.deputyUnit = row.deputyUnit;
                this.updateform.proportion = row.proportion;
            }else {
                this.updateORinsert = '1';
                this.uORiText = '添加';
                this.updateform = {};
            }
        },
        // 删除
        deleteUser(row){
            console.log(row);
             axios.post("http://localhost:8082/commodity/deleteUnit?id="+row).then(res=>{
                 console.log("删除："+res)
                 if(res!='ok'){
                    this.queryUnitList();
                    this.$message.success("删除成功");
                }else{
                    this.$message.error("删除失败");
                }
             })
        }
    }
    
}
</script>
<style lang="less" scoped>

</style>